<template>
    <div>
        <a-space>
            帖子状态:
            <a-radio-group v-model:value="approvalStatus" button-style="solid">
                <a-radio-button value="Pending">待审查</a-radio-button>
                <a-radio-button value="Approved">已通过</a-radio-button>
                <a-radio-button value="Rejected">已拒绝</a-radio-button>
            </a-radio-group>
        </a-space>
    </div>
    <a-table
        :columns="columns"
        :row-key="record => record.id"
        :data-source="list"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
    >
        <template #bodyCell="{ column, text ,record}">
            <template v-if="column.dataIndex === 'title'">
                <router-link :to="{ name: 'detail', params: { eventId: record.id }}">《{{record.title}}》</router-link>
            </template>
            <template v-if="column.dataIndex === 'user'">{{ text?text.nickname:'匿名'}}</template>
            <template v-if="column.dataIndex === 'control'">
                <template v-if="record.approvalStatus=='Pending'">
                    <a-space>
                        <a-button type="primary" shape="round" @click="changeApprovalStatus(record.id,'Approved')" >通过</a-button>
                        <a-button type="primary" danger  shape="round"  @click="changeApprovalStatus(record.id,'Rejected')">拒绝</a-button>
                    </a-space>
                 </template>
                <template v-if="record.approvalStatus!='Pending'">
                    <a-button type="primary" shape="round" @click="changeApprovalStatus(record.id,'Pending')" >撤回</a-button>
                </template>
            </template>
        </template>
    </a-table>
</template>

<script setup>
import {computed, onMounted, ref, watch} from "vue";
import axios from 'axios'
import { useUserStore } from '../../../stores/user';
import {usePagination} from "vue-request";
import {useRouter} from "vue-router";

const userStore  = useUserStore()

const approvalStatus = ref('Pending')


const router = useRouter()
const columns = [{
    title: '标题',
    dataIndex: 'title',
    },
    {
        title: '作者',
        dataIndex: 'user',
    },
    {
        title: '状态',
        dataIndex: 'approvalStatus',
        width: '20%',
    },
    {
        title: '创建时间',
        dataIndex: 'createTime',
        width: '20%',
    },
    {
        title: '操作',
        dataIndex: 'control',
        width: '15%',
    },
];

const queryData = params => {
    return axios.get('/event/list', {
        params,
    });
};

const {
    data,
    run,
    loading,
    current,
    pageSize,
} = usePagination(queryData, {
    // formatResult: res => res.data.data.list,
    defaultParams: [
        {
            pageSize: 5,
            approvalStatus:approvalStatus.value,
        },
    ],
    pagination: {
        currentKey: 'pageNum',
        pageSizeKey: 'pageSize',
    },
});

const list = computed(() => data.value?.data.data.list || []);
const pagination = computed(() => ({
    total: data.value?.data.data.total,
    current: current.value,
    pageSize: pageSize.value,
    pageSizeOptions: ['3', '5', '10']
}));
const handleTableChange = (pag, filters, sorter) => {
    if(sorter.field == 'searchIndex'){
        sorter.field = 'search_index'
    }
    if(sorter.order == 'ascend'){
        sorter.order='asc'
    }else if(sorter.order == 'descend'){
        sorter.order='desc'
    }
    console.log("handleTableChange",filters)
    run({
        pageSize: pag.pageSize,
        pageNum: pag?.current,
        sort: sorter.field,
        order: sorter.order,
        approvalStatus:approvalStatus.value,
        // ...filters,
    });
};

watch(approvalStatus,()=>{
    handleTableChange({
        pageSize:pagination.pageSizeKey,
        current:1
    },{

    },{
        field:'',
        order:''
    })
})

const changeApprovalStatus =(id,state)=>{
    axios.put('/admin/event/update/approvalStatus',{
        id:id,
        approvalStatus:state
    }).then(res => {
        handleTableChange({
            pageSize:pagination.pageSizeKey,
            current:1
        },{

        },{
            field:'',
            order:''
        })
    })
}


onMounted(() => {
    // alert("mm")
    if(userStore.user.id == null){
        alert("非法进入")
        router.push("/")
    }
})

watch(() =>userStore.user.id,(newid)=>{
    if(newid == null){
        alert("已退出，回到首页")
        router.push("/")
    }
})
</script>

<style scoped>

</style>